<template>
    <div class="header">
        <div class="name">欢迎你~{{ detail?.name }}</div>
        <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                <img :src="detail?.avatar" alt="" />
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="outAdmin()"
                        >退出登陆</el-dropdown-item
                    >
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { onBeforeMount, ref, computed, ComputedRef } from 'vue';
import { detailType } from './data';
import { ElMessage, ElMessageBox } from 'element-plus';
import { userStore } from '@/store/user';
import { useSelectStore } from '@/store/fetchSelectdata';
import { useRouter } from 'vue-router';
const user = userStore();
const selectStore = useSelectStore();
const router = useRouter();
const detail: ComputedRef<detailType> = computed(() => user.userInfo);
onBeforeMount(() => {
    // 获取用户信息
    // user.getInfos();
    // 获取表单创建的列表数据
    selectStore.getSelectdata();
    selectStore.getparamList();
});

const outAdmin = () => {
    ElMessageBox.confirm('确定要退出登陆吗?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        title: '',
    })
        .then(() => {
            userStore().LogOut();
            ElMessage({
                type: 'success',
                message: '退出成功，3s后将跳转到登陆页面！',
            });
            setTimeout(() => {
                router.push('/login');
            }, 3000);
        })
        .catch((err) => {
            console.log(err);
        });
};
</script>
<style lang="scss" scope>
.header {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .name {
        font-size: 14px;
        color: #333;
    }
    .el-dropdown-link {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        cursor: pointer;
        margin-left: 10px;
        img {
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
    }
}
</style>
